<template>
  <div id="house">
    <router-link :to="{path:'/housedetail',query:{name: ''}}">
      <img class="mt40" style="width:4.72rem;height:.68rem;float:right" src="../assets/img/seven/titleimg.png" alt="" />
    </router-link>
    <div class="tablebox">
      <!-- <router-link tag="div" :to="{path:'/housedetail',query:{name: itemList.name}}" @mouseover="mouseover"
        @mouseout="mouseout" class="left fcd">
        <div>{{ itemList.name }}</div>
        <div class="QS mt10">{{ itemList.money }}</div>
        <div class="QS text2">总租赁量/套</div>
      </router-link> -->
      <div class="left fcd">
        <a-carousel autoplay :afterChange="afterChange" :dots="false">
          <div v-for="(item,index) in dataList" :key="index">
            <div>{{ item.name }}</div>
            <div class="QS mt10">{{ item.money }}</div>
            <div class="QS text2">总租赁量/套</div>
          </div>
        </a-carousel>
      </div>
      <div class="right">
        <div class="number">
          <div class="title">拱墅区房产租赁总量/套</div>
          <scrollNum :change="true" FontSize="0.28rem" Width="0.24rem" Height="0.3rem" count="000,000,903" />
        </div>
        <div class="table">
          <div class="fb th">
            <span>房产类型</span>
            <span>总租赁量</span>
            <span>本月</span>
            <span>上月</span>
          </div>
          <div>
            <router-link tag="div" style="cursor: pointer;" :to="{path:'/housedetail',query:{name: itemList.name}}">
              <div v-for="(item, index) in itemList.array" :key="index" class="fb mt10">
                <span>{{ item.type }}</span>
                <span>{{ item.number }}</span>
                <span style="">{{ item.now }}</span>
                <span style="">{{ item.last }}</span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scrollNum from "@/components/scrollNum";
import { post, get } from "@/utils/axios";

export default {
  name: "house",
  components: {
    scrollNum
  },
  data() {
    return {
      timer: null,
      activeIndex: 0,
      itemList: {
        name: "上塘街道",
        money: "90",
        array: [
          {
            type: "住房",
            number: "56套",
            last: "4套",
            now: "3套"
          },
          {
            type: "商铺",
            number: "14套",
            last: "3套",
            now: "2套"
          },
          {
            type: "公寓",
            number: "19套",
            last: "2套",
            now: "1套"
          }
        ]
      },
      dataList: [
        {
          name: "上塘街道",
          money: "90",
          array: [
            {
              type: "住房",
              number: "56套",
              last: "4套",
              now: "3套"
            },
            {
              type: "商铺",
              number: "14套",
              last: "3套",
              now: "2套"
            },
            {
              type: "公寓",
              number: "19套",
              last: "2套",
              now: "1套"
            }
          ]
        },
        {
          name: "祥符街道",
          money: "89",
          array: [
            {
              type: "住房",
              number: "49套",
              last: "3套",
              now: "2套"
            },
            {
              type: "商铺",
              number: "21套",
              last: "5套",
              now: "4套"
            },
            {
              type: "公寓",
              number: "18套",
              last: "3套",
              now: "2套"
            }
          ]
        },
        {
          name: "半山街道",
          money: "101",
          array: [
            {
              type: "住房",
              number: "76套",
              last: "4套",
              now: "5套"
            },
            {
              type: "商铺",
              number: "18套",
              last: "1套",
              now: "2套"
            },
            {
              type: "公寓",
              number: "17套",
              last: "2套",
              now: "3套"
            }
          ]
        },
        {
          name: "康桥街道",
          money: "83",
          array: [
            {
              type: "住房",
              number: "39套",
              last: "3套",
              now: "2套"
            },
            {
              type: "商铺",
              number: "19套",
              last: "2套",
              now: "1套"
            },
            {
              type: "公寓",
              number: "17套",
              last: "3套",
              now: "2套"
            }
          ]
        },
        {
          name: "湖墅街道",
          money: "88",
          array: [
            {
              type: "住房",
              number: "49套",
              last: "4套",
              now: "3套"
            },
            {
              type: "商铺",
              number: "18套",
              last: "2套",
              now: "1套"
            },
            {
              type: "公寓",
              number: "17套",
              last: "3套",
              now: "2套"
            }
          ]
        },
        {
          name: "小河街道",
          money: "75",
          array: [
            {
              type: "住房",
              number: "35套",
              last: "4套",
              now: "5套"
            },
            {
              type: "商铺",
              number: "13套",
              last: "4套",
              now: "4套"
            },
            {
              type: "公寓",
              number: "15套",
              last: "0套",
              now: "0套"
            }
          ]
        },
        {
          name: "拱宸桥街道",
          money: "83",
          array: [
            {
              type: "住房",
              number: "40套",
              last: "4套",
              now: "3套"
            },
            {
              type: "商铺",
              number: "20套",
              last: "1套",
              now: "0套"
            },
            {
              type: "公寓",
              number: "18套",
              last: "4套",
              now: "3套"
            }
          ]
        },
        {
          name: "和睦街道",
          money: "102",
          array: [
            {
              type: "住房",
              number: "72套",
              last: "3套",
              now: "2套"
            },
            {
              type: "商铺",
              number: "23套",
              last: "3套",
              now: "2套"
            },
            {
              type: "公寓",
              number: "21套",
              last: "6套",
              now: "5套"
            }
          ]
        },
        {
          name: "米市巷街道",
          money: "98",
          array: [
            {
              type: "住房",
              number: "63套",
              last: "5套",
              now: "6套"
            },
            {
              type: "商铺",
              number: "17套",
              last: "1套",
              now: "2套"
            },
            {
              type: "公寓",
              number: "20套",
              last: "0套",
              now: "1套"
            }
          ]
        },
        {
          name: "大关街道",
          money: "94",
          array: [
            {
              type: "住房",
              number: "62套",
              last: "2套",
              now: "1套"
            },
            {
              type: "商铺",
              number: "18套",
              last: "1套",
              now: "0套"
            },
            {
              type: "公寓",
              number: "18套",
              last: "7套",
              now: "6套"
            }
          ]
        }
      ]
    };
  },

  created() {},
  mounted() {
    // this.changeItem();
  },
  destroyed() {
    this.timer = null;
  },

  methods: {
    changeItem() {
      this.timer = setInterval(_ => {
        if (this.activeIndex < this.dataList.length - 1) {
          this.activeIndex += 1;
        } else {
          this.activeIndex = 0;
        }
        this.itemList = this.dataList[this.activeIndex];
      }, 5000);
    },
    afterChange(index) {
      this.itemList = this.dataList[index];
    },
    mouseover() {
      clearInterval(this.timer);
    },
    mouseout() {
      this.changeItem();
    }
    // getdayhouse(day) {
    //   //每天实时人口
    //   let timestamp = Date.parse(new Date(day)) / 1000;
    //   let signValue = md5("330112NK07piZ0x9WcLpKW" + timestamp);
    //   post("/v1/data/10000017491", {
    //     area_code: "330112",
    //     sign: signValue,
    //     timestamp: timestamp
    //   }).then(res => {
    //     this.peopleArray = res.data;
    //     var count = 0;
    //     this.peopleArray.forEach(item => {
    //       count += Number(item.num);
    //     });
    //     this.peopleDay.push(String(count));
    //   });
    // }
  }
};
</script>

<style lang="scss">
#house {
  .ant-carousel {
    color: #fff;
    padding: 0.08rem 0;
    width: 93%;
    text-align: center;
    margin: 0 auto !important;
  }
  //swiper箭头
  .ant-carousel >>> .custom-slick-arrow {
    // width: 25px;
    // height: 25px;
    // font-size: 0.18rem;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel .slick-prev,
  .ant-carousel .slick-next {
    font-size: 0.16rem;
    color: $BL;
  }
  .ant-carousel .slick-prev {
    top: 70%;
    left: -0.16rem !important;
  }
  .ant-carousel .slick-next {
    top: 70%;
    right: -0.1rem !important;
  }
  .ant-carousel .slick-next::before,
  .ant-carousel .slick-prev::before {
    content: "";
  }
  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }
}
</style>
<style lang="scss" scoped>
#house {
  width: 100%;
  // border: 1px solid aqua;
  .tablebox {
    width: 100%;
    height: 3rem;
    clear: both;
    overflow: hidden;
    position: relative;

    .left {
      cursor: pointer;
      width: 1.26rem;
      height: 2.74rem;
      background: url(../assets/img/seven/img01.png) center no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0.2rem;
      left: 0;
      .mt10 {
        font-weight: 600;
        font-size: 0.2rem;
      }
      .text2 {
        font-size: 0.12rem;
      }
    }
    .right {
      width: 4.2rem;
      height: 2.6rem;
      position: absolute;
      top: 0.23rem;
      right: 0;
      .number {
        width: 3.2rem;
        position: absolute;
        top: 0rem;
        right: 0;
        .title {
          text-align: left;
          line-height: 0.18rem;
          font-size: 0.14rem;
          background-color: #0d2d50;
          color: #9ff4f6;
          margin-bottom: 0.2rem;
        }
      }
      .table {
        width: 4.2rem;
        height: 1.68rem;
        padding-top: 0.4rem;
        background: url(../assets/img/seven/img02.png) center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 1rem;
        left: 0;
      }
      .th {
        line-height: 0.2rem;
        color: #9ff4f6;
      }
      .fb span {
        display: inline-block;
        width: 25%;
        text-align: center;
        line-height: 0.2rem;
      }
    }
  }
}
</style>
